<template>
<div>
  <el-table
    :data="articalData"
    style="width: 100%">
    <el-table-column
      label="标题"
      prop="artical_title">
    </el-table-column>
    <el-table-column
      label="内容"
      prop="artical_sub">
    </el-table-column>
    <el-table-column
      label="图片">
      <template  slot-scope="scope">
      <img :src="scope.row.artical_img" alt="" style="width:140px">
       </template>
    </el-table-column>

    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入标题关键字搜索" />

        <el-button size='mini' @click="find(scope)">搜索</el-button>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="$router.push(`/All/articalUpdata/${scope.row._id}`)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <page></page>
</div>
</template>

<script>
import page from "./articalPage"
import {createNamespacedHelpers} from "vuex";
const {mapState,mapActions,mapMutations} = createNamespacedHelpers('articalData');
import axios from "axios";
  export default {
      components:{
          page
      },
    data() {
      return {
        search: '',
      }
    },
    computed:{
        ...mapState(['articalData']),
    },
    methods: {
      handleDelete(index, row,) {
        const id = row._id
        axios
        .delete('/artical/delete',{data:{_id:id}})
        .then(res =>{
            if(res.data){
                this.getArticalAsync();
            }
        })
      },
      find(){
          this.search_artical(this.search);
          this.getArticalAsync();
      },
      ...mapActions(['getArticalAsync']),
      ...mapMutations(['search_artical'])
    },
    mounted(){
        this.getArticalAsync();
    }
  }
</script>

<style>

</style>